<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>

<!-- <h4>分类标题</h4> -->
	    <div class="row">
	      <div class="col-md-12 layout-header">
	        <button id="addBtn_XyhJzStep" type="button" class="btn btn-default">添加</button>
	        <button id="delBtn_XyhJzStep" type="button" class="btn btn-default">删除</button>
	        <script type="text/javascript"> 
			$('#addBtn_XyhJzStep').bind('click', function(){
		 		 var tr =  $("#add_xyhJzStep_table_template tr").clone();
			 	 $("#add_xyhJzStep_table").append(tr);
			 	 resetTrNum('add_xyhJzStep_table');
			 	stepNum('add_xyhJzStep_table');
			 	 return false;
		    });  
			 /*
		     *  弹框层
		     */
		    function addImg(stutsIndex){
		    	
		        //页面层
		         var layerIndex = layer.open({
		            type: 1,
		            title:'上传图示',
		            skin: 'layui-layer-rim', //加上边框
		            area: ['600px', '400px'], //宽高
		            content: ' ' +
		            ' <input id="file_upload" name="file_upload" type="file" multiple="multipart/form-data">' +
		            '<div class="upload-div">' +
			          
		            '</div> ' +
		            '<div style="clear:both;"></div> '+
		            ' <button id="btnsubmit" class="btnsubmit" onclick="stepImgsubmit('+stutsIndex+');">提交</button>' 
		        });
		        
		         /**
		          * 上传图示
		          */
		         $('#file_upload').uploadify({
		             'buttonText' : ' 选择图片 ',
		             'swf'     : 'webpage/com/jianzhi/step/uploadify.swf' ,    //指定上传控件的主体文件
		             'uploader' : 'uploadAction.do?upload',    //指定服务器端上传处理文件
		             'fileTypeExts':'*.gif; *.jpg; *.png',//允许上传的文件后缀
//		             'fileTypeDesc' : '请上传后缀为 .gif .jpg .png 的图片文件',  //在浏览窗口底部的文件类型下拉菜单中显示的文本
		             'formData': { 'someKey': 'someValue', 'someOtherKey': 1 },  //发送给后台的其他参数通过formData指定
//		             'queueID': 'fileQueue',  //上传文件页面中，你想要用来作为文件队列的元素的id, 默认为false  自动生成,  不带#
		             'auto': true, //选择文件后自动上传
		             'method':'post', //上传方式，默认post
		             'multi': true,  //设置为true将允许多文件上传
		             'checkExisting': false,  //文件上传重复性检查程序，检查即将上传的文件在服务器端是否已存在，存在返回1，不存在返回0
		             'fileSizeLimit': 2048 , //上传文件的大小限制 ，如果为整数型则表示以KB为单位的大小，如果是字符串，则可以使用(B, KB, MB, or GB)为单位，比如’2MB’；如果设置为0则表示无限制
//		             'height':'100px',  //设置按钮的高度
		             'queueSizeLimit':1,  			 //队列最多显示的任务数量，如果选择的文件数量超出此限制，将会出发onSelectError事件
		             'removeCompleted' : 'true',  	//是否自动将已完成任务从队列中删除
		             'removeTimeOut':1,				// 与removeCompleted 有关，完成后删除的等待时间
		             'uploadLimit': 999 ,					//	最大上传文件数量，如果达到或超出此限制将会触发onUploadError事件
		             'onUploadSuccess' : function(file,data,response){
		            	 $("div.upload-div").append("<div class='add-img'><div>bianhao</div><img src="+data+"><div><a class='deleteImg'  onclick='deleteImg("+data+",this)'>删除</a></div></div>");
		            	 console.log(data);
		             }
		         });
		    };
		/*           上传图示结束              */
		
		/**
		*  删除步骤图片
		*/
		function deleteImg(imgPath,obj){
			console.log(1);
			  layer.confirm('确定删除图片？',{
				btn : ['删除','返回']  //按钮
			} ,function(){
			  				$.ajax({
			  					   type: 'POST',
			  					   url: 'uploadAction.do?deleteStepImg',
			  					   data: {
			  						   filePath: imgPath,
			  					   },
			  					   dataType:'json',
			  					   success: function(data){
			  						   console.log(data);
			  					   },
			  					 });
			  				 $(obj).parent().parent().hide(1000,function(){
			  					 $(this).remove();
			  				 });
			  				layer.closeAll('dialog');
			  			}
			  )}
		
		/**
		*
		* 提交步骤图片
		*/
		function stepImgsubmit(stusIndex){
			var imgSrc = "";
			$(".add-img>img").each(function(){
				imgSrc += $(this).attr("src") +",";
				})
			console.log(imgSrc);
			var message = $("input[name='xyhJzStepList["+stusIndex+"].message']");
			alert("图示添加完成");
			layer.closeAll();
			console.log(message);
			message.val(imgSrc);
		}
		
		
		
			$('#delBtn_XyhJzStep').bind('click', function(){   
		       $("#add_xyhJzStep_table").find("input:checked").parent().parent().remove();   
		        resetTrNum('add_xyhJzStep_table');
		        stepNum('add_xyhJzStep_table');
		        return false;
		    });
		    $(document).ready(function(){
		    	if(location.href.indexOf("load=detail")!=-1){
					$(":input").attr("disabled","true");
					$(".datagrid-toolbar").hide();
				}
		    	resetTrNum('add_xyhJzStep_table');
		    });
		</script>
	      </div>
	    </div>
<div style="margin: 0 15px; background-color: white;">    
	    <!-- Table -->
      <table id="xyhJzStep_table" class="table table-bordered table-hover" style="margin-bottom: 0;">
		<thead>
	      <tr>
	        <th style="white-space:nowrap;width:50px;">序号</th>
	        <th style="white-space:nowrap;width:50px;">操作</th>
					  <th>
							步骤顺序
					  </th>
					  <th>
							步骤说明
					  </th>
					  <th>
							步骤类型
					  </th>
	      </tr>
	    </thead>
        
	<tbody id="add_xyhJzStep_table">	
	<c:if test="${fn:length(xyhJzStepList)  <= 0 }">
			<tr>
				<th scope="row"><div name="xh"></div></th>
				<td><input style="width:20px;" type="checkbox" name="ck"/></td>
					<input name="xyhJzStepList[0].id" type="hidden"/>
					<input name="xyhJzStepList[0].createName" type="hidden"/>
					<input name="xyhJzStepList[0].createDate" type="hidden"/>
					<input name="xyhJzStepList[0].updateName" type="hidden"/>
					<input name="xyhJzStepList[0].updateDate" type="hidden"/>
					<input name="xyhJzStepList[0].jobId" type="hidden"/>
					<input name="xyhJzStepList[0].message" type="hidden"/>
				  <td>
					  	<input id="step" name="xyhJzStepList[0].steps" maxlength="2"   value="1"
					  		type="text" class="form-control"  style="width:120px;" disabled="disabled" >
					  <label class="Validform_label" style="display: none;">步骤顺序</label>
					</td>
				  <td>
					  	<input name="xyhJzStepList[0].introduce" maxlength="500"  datatype="*"
					  		type="text" class="form-control"  >
					  <label class="Validform_label" style="display: none;">步骤说明</label>
					</td>
				  <td>
							<t:dictSelect field="xyhJzStepList[0].type" type="list" extendJson="{class:'form-control jz-step-style',style:'width:150px'}"  datatype="*"
										typeGroupCode="step_type" defaultVal="${xyhJzStepPage.type}" hasLabel="false"  title="步骤类型"></t:dictSelect>     
							<div class="jz-step-styleMsg" > 
								<div class="step-addImgButton" onclick="addImg(0)">
										添加图示
								</div>
							</div>
					  <label class="Validform_label" style="display: none;">步骤类型</label>
					</td>
   			</tr>
	</c:if>
	<c:if test="${fn:length(xyhJzStepList)  > 0 }">
		<c:forEach items="${xyhJzStepList}" var="poVal" varStatus="stuts">
			<tr>
				<th scope="row"><div name="xh">${stuts.index+1 }</div></th>
				<td><input style="width:20px;" type="checkbox" name="ck"/></td>
					<input name="xyhJzStepList[${stuts.index }].id" type="hidden" value="${poVal.id }"/>
					<input name="xyhJzStepList[${stuts.index }].createName" type="hidden" value="${poVal.createName }"/>
					<input name="xyhJzStepList[${stuts.index }].createDate" type="hidden" value="${poVal.createDate }"/>
					<input name="xyhJzStepList[${stuts.index }].updateName" type="hidden" value="${poVal.updateName }"/>
					<input name="xyhJzStepList[${stuts.index }].updateDate" type="hidden" value="${poVal.updateDate }"/>
					<input name="xyhJzStepList[${stuts.index }].jobId" type="hidden" value="${poVal.jobId }"/>
					<input name="xyhJzStepList[${stuts.index }].message" type="hidden" value="${poVal.message }"/>
				   <td align="left">
					  	<input id="step" name="xyhJzStepList[${stuts.index }].steps" maxlength="2"  disabled="disabled" 
					  		type="text" class="form-control"  style="width:120px;"  value="${poVal.steps }">
					  <label class="Validform_label" style="display: none;">步骤顺序</label>
				   </td>
				   <td align="left">
					  	<input name="xyhJzStepList[${stuts.index }].introduce" maxlength="500" 
					  		type="text" class="form-control"    value="${poVal.introduce }">
					  <label class="Validform_label" style="display: none;">步骤说明</label>
				   </td>
				   <td align="left">
							<t:dictSelect field="xyhJzStepList[${stuts.index }].type" type="list" extendJson="{class:'form-control jz-step-style',style:'width:150px'}"
										typeGroupCode="step_type" defaultVal="${poVal.type }" hasLabel="false"  title="步骤类型"></t:dictSelect>     
						<div class="jz-step-styleMsg" > 
								<div class="step-addImgButton" onclick="addImg(stuts.index)">
										添加图示
								</div>
							</div>
					  <label class="Validform_label" style="display: none;">步骤类型</label>
				   </td>
   			</tr>
		</c:forEach>
	</c:if>	
	</tbody>
</table>
